﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.orrg/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Dribble Ball</title>
    <link rel="stylesheet" href="../css/db.css" />
    <link rel="stylesheet" href="../css/colorbox.css" />
     <script type="text/javascript" src="../js/track.js"/>
</head>
<body>
    <div id="status">
        <div id="counter">
        </div>
    </div>
    <div id="win">
        <svg xmlns="http://www.w3.org/2000/svg" width="1800" height="600" version="1.1">
            <defs>
                <marker id="mTriangle" markerWidth="50" markerHeight="100" refX="50" refY="50" orient="auto">
                    <path d="M 0 0 50 50 0 100 Z" style="fill: black;" />
                </marker>
                <clipPath id="light">
                    <circle id="ball" r="80" />
                    <circle id="light1" r="0" cx="470" cy="250" />
                    <circle id="light2" r="0" cx="900" cy="250" />
                    <circle id="light3" r="0" cx="1620" cy="180" />
                </clipPath>
            </defs>
            <radialGradient id="grad1" cx="20%" cy="30%" r="100%">
                <stop offset="0%" style="stop-color: rgb(255,255,255); stop-opacity: 0" />
                <stop offset="100%" style="stop-color: #ABD9F7; stop-opacity: 0.4" />
            </radialGradient>
            <linearGradient id="button" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" style="stop-color: #FC1212; stop-opacity: 1" />
                <stop offset="60%" style="stop-color: #F7CBCB; stop-opacity: 1" />
                <stop offset="100%" style="stop-color: #FC1212; stop-opacity: 1" />
            </linearGradient>
            <g id="back">
            </g>
            <rect id="darkbackground" width="100%" height="100%" />
            <g id="main">
                <rect width="100%" height="100%" fill="url(#grad1)" />
                <line x1="0" y1="600" x2="0" y2="0" db-pad="bad" />
                <line x1="0" y1="350" x2="400" y2="350" db-pad="ground" />
                <line x1="800" y1="600" x2="1400" y2="600" db-pad="ground" />
                <line x1="400" y1="350" x2="400" y2="600" db-pad="ground" />
                <g transform="translate(340 340)" db-button="button1" />
                <!--moving 1-->
                <line id="move11" x1="650" y1="500" x2="450" y2="350" db-pad="ground" />
                <line id="move12" x1="450" y1="350" x2="700" y2="350" db-pad="ground" />
                <line id="move13" x1="700" y1="350" x2="650" y2="500" db-pad="ground" />
                <g transform="translate(640 10) rotate(180)" db-button="button2" />
                <g transform="translate(900 35)" db-cat="reward" />
                <!--moving 2-->
                <line id="move21" x1="1000" y1="300" x2="1000" y2="50" db-pad="ground" />
                <line id="move22" x1="1000" y1="50" x2="1300" y2="50" db-pad="ground" />
                <line id="move23" x1="1300" y1="50" x2="1300" y2="300" db-pad="ground" />
                <line id="move24" x1="1000" y1="300" x2="1300" y2="300" db-pad="bad" />
                <g transform="translate(1260 10) rotate(180)" db-button="button3" />
                <g transform="translate(1180 550)" db-cat="reward" />
                <!--target-->
                <line id="target1" x1="1400" y1="250" x2="1560" y2="250" db-cat="target" />
                <line id="target2" x2="1400" y2="255" x1="1560" y1="255" db-pad="wood" />
                <circle id="target3" cx="1400" cy="250" r="6" db-pad="wood" />
                <circle id="target4" cx="1560" cy="250" r="6" db-pad="wood" />
                <g transform="translate(1720 80)" db-cat="reward" />
                <line x1="1790" y1="600" x2="1790" y2="0" db-pad="wood" />
            </g>
            <rect id="dummy" width="100%" height="100%" fill-opacity="0">
            </rect>
            <g id="front">
            </g>
        </svg>
    </div>
    <div id="skip">
        &lt;&lt; Skip Preview
    </div>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/jquery.countdown.js"></script>
    <script type="text/javascript" src="../js/jquery.colorbox.js"></script>
    <script type="text/javascript" src="../js/svg.js"></script>
    <script type="text/javascript" src="../js/db.js"></script>
    <script type="text/javascript">
        //<![CDATA[
        $(function () {
            db.path = [{ x: 0, y: 300 }, { x: 1800, y: 300}];

            var dir = 1;
            var x = 400;

            var dir2 = 1;
            var y = 150;

            var dir3 = 1;
            var x3 = 1400;

            db.setTimer(null, function () {
                //move 1
                if (x < 400 || x > 650)
                    dir *= -1;
                x += dir;
                $("#move11").attr({ "db-speed-x": dir, x1: x + 150, x2: x });
                $("#move12").attr({ "db-speed-x": dir, x1: x, x2: x + 300 });
                $("#move13").attr({ "db-speed-x": dir, x1: x + 300, x2: x + 150 });

                //move 2
                if (y < 100 || y > 300)
                    dir2 *= -1;
                y += dir2;
                $("#move21").attr({ "db-speed-y": dir2, y1: y + 250, y2: y });
                $("#move22").attr({ "db-speed-y": dir2, y1: y, y2: y });
                $("#move23").attr({ "db-speed-y": dir2, y1: y, y2: y + 250 });
                $("#move24").attr({ "db-speed-y": dir2, y1: y + 250, y2: y + 250 });

                //target
                if (x3 < 1400 || x3 > 1600)
                    dir3 *= -1;
                x3 += dir3;
                $("#target1").attr({ "db-speed-x": dir3, x1: x3, x2: x3 + 160 });
                $("#main image[class='target']").attr("x", x3);
                $("#target2").attr({ "db-speed-x": dir3, x2: x3, x1: x3 + 160 });
                $("#target3").attr({ "db-speed-x": dir3, cx: x3 });
                $("#target4").attr({ "db-speed-x": dir3, cx: x3 + 160 });
            });



            triggers.gameStarted = function () {
                $("#darkbackground").animate({ opacity: 1 }, 1000, function () {
                    $("#main").attr("clip-path", "url(#light)");
                });
            };
            triggers.ballMoved = function (e) {
                $("#ball").attr({ cx: e.position.x, cy: e.position.y });
            };

            triggers.hitButton = function (e) {
                switch (e.sender.attr("db-button")) {
                    case "button1":
                        $("#light1").attr("r", 180);
                        break;
                    case "button2":
                        $("#light2").attr("r", 180);
                        break;
                    case "button3":
                        $("#light3").attr("r", 180);
                        break;
                }
            }
            //highlightDesign();
            startGame({
                time: 45,
                timeout: function () {
                    setTimeout(function () { db.gameEnded(false); }, 10000);
                }
            });
        });
        //]]>
    </script>
</body>
</html>
